<template>
	<view>
		<!-- 模板内如何访问vuex状体 -->
		<!-- <text>{{$store.state.test}}</text> -->
		<!-- 
			1. 购物车页面报错
				收货地址
				水平分割线
				列表样式的商品（复选框   商品图片   商品描述）
				水平分割线
				
				总计   2件        总价 ：123.00    立即支付按钮（登录  支付）				
			2. 动态获取购物车中商品数量，徽章呈现在tabbar页面（vuex）
			3. 商品详情页动态获取购物车中商品数量（vuex）
		 -->
		<!-- 收货地址 -->
		<view class="user-address">
			<myadd></myadd>
		</view>
		<hr>
		<!-- 购物车内商品展示 -->
		<view class="goods-list">
			<text class="goods-title">商品展示区</text>
			<!-- 购物车商品循环展示  左图片+文字-->
			<!-- 滑动删除组件    设置单击事件  -  vuex中car数组对应id的元素pop或者shift或者组装filter  -->
			<uni-swipe-action class="goods-list-item">
				<view class="goods-item-left" v-for="(item,index) in car" :key="index">
					<uni-swipe-action-item  :right-options="options" :left-options="options" @click="onClick(item)">
						<radio :checked="item.goods_state" color="#c00000" v-if="showRadio" @click="getgoodsinfo(item)"
							value="" />
						<image class="goods-pic" :src="item.goods_img" mode="widthFix"></image>
						<view class="goodsname">
							<text style="font-size: 14px;">{{item.goods_name}}</text>
						</view>
						<uni-number-box v-model="vModelValue" @change="changeValue(item)" />
					</uni-swipe-action-item>
				</view>
			</uni-swipe-action>
		</view>
		<!-- 
			购物车
			1. 共享数据
			2. 统一修改
			组件间通信
				父组件向子组件   属性    子组件props属性或者$attr
				子组件向父组件   属性    子组件$emit("父组件事件名",子组件携带参数)
				$bus  ----  $on
				slot   插槽将子组件的属性暴露父组件
				
				Vuex  -- 第三方存储  状态管理插件
						mixin
			uniapp内置Vuex  == 不需要安装
			需要配置
			store
				index.js   store对象（state、actions、mutations、getters、模块）
		 -->

		<!-- 模板内如何访问vuex状态 -->
		<!-- <text>{{$store.state.test}}</text> -->

		<!-- 
			首页+分类 == 商品链接   单击       商品详情页
			搜索栏 - 热门搜索|搜索历史记录     单击
			
			商品详情页   单击  加入购物车  按钮
				1. 获取商品详情页中的桑品部分信息  goods（名字、id、图片、价格、数量、备选状态）
				2. 跳转到购物车页面
				3. 将携带的参数  更新到  state中模块 car[]
					本地存储，car：本地存储获取
					
				4. 购物车  页面  购物车（右上角徽标显示当前选中商品的数量）  total
					四个tabbar页面中的购物车tab （同上）
					购物车页面   更新购买数量触发  --  total改变
								更新复选框       --   
									默认复选框未被选中
									
								左滑动“删除”     --   
		 -->

		<!-- 收货地址  uni.chooseAddress()-->
		<!-- 搜索栏 --   跳转到商品详情页   --  携带参数
			 首页   --   单击商品链接  --  跳转到商品详情页  --  携带参数
			 访问的同一个对象，代码重复
			 
			 onload (options)
				?query=options.goodsid
				
				详情页(携带对应商品id)   数据的共享用Vuex来将数据做统一的管理
		-->


		<!-- 购物列表 -->
		<!-- radio 商品图片+商品简介 -->
		<!-- 商品价格+购买数量 -->

		<!-- 总计购买商品数量 +总价（过滤器） -->
		<!-- 支付按钮 -->
		<!-- 总计   商品详情页购物车徽标 -->

		<!-- 购物车底部 -->
		<view class="goods-footer">
			<mycount></mycount>
		</view>
	</view>
</template>

<script>
	import mycount from "@/components/my-count/my-count.vue"
	import myadd from "@/components/my-address/my-address.vue"
	import {
		mapGetters,
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				//是否展示图片左侧的redio
				showRadio: true,
				// 绑定商品数量
				vModelValue: 1,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				// 检测address  要求优化到user.js
				// address: {}
			}
		},
		components: {
			myadd,
			mycount
		},
		// 映射store中car到当前组件
		computed: {
			...mapGetters("m_car", ["total"]),
			// 参数1：模块名称  参数2： 运算属性
			...mapState("m_car", ["car"])
		},


		onLoad() {
			// console.log(this.$store);
			console.log(this);
			this.vModelValue = this.total
		},
		// 当页面打开的时候，购物车显示右上角徽标
		onShow() {
			uni.setTabBarBadge({
				index: 2,
				text: this.total + ""
			})
		},
		methods: {
			getgoodsinfo(e) {
				console.log('car', e);
				// console.log(this.$store.state.m_car.car);
				// 获取当前商品的详细信息
				// 更新state中car  total被更新
				// 将选中状态的商品加入购物车，未被选中的删除掉
				// 购物车收货地址

				// 访问当单击商品后，触发mutations中 updatecar，实现选中商品保存，将当前商品的state当做参数
				e.goods_state = !e.goods_state
				this.$store.commit("m_car/updatecar", e.goods_state)
			},
			changeValue(item) {
				// console.log("商品数量发生变化后",value)
				// this.vModelValue += 1
				// console.log(this.vModelValue);
				// this.vModelValue = value
				// console.log(value);
				// 更新state中的car对应商品元素中的goods_count
				// actions -  处理数据异步方式获取，比如ajax；数据前提条件
				// mutations - 直接处理
				// goods_count  goods_state
				item.goods_count = this.vModelValue + 1
				this.$store.commit("m_car/updatecargoods", item)
			},
			// 滑动删除按钮
			// 携带当前被删除商品的id作为参数
			onClick(goods) {
				// console.log('点击了'+(e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
				// 1. 获取state中car数组，filter，将符合条件
				// 2. 将filter后的数据本地存储
				// console.log(goods)
				this.$store.commit("m_car/deletecaritem", goods)
			},
			swipeChange(e, index) {
				console.log('当前状态：' + e + '，下标：' + index)
			}
		}
	}
</script>

<style lang="scss">
	.goods-list {
		margin-top: 10px;
		text-align: center;

		.goods-title {
			font-size: 18px;
			font-weight: 700;
		}

		.goods-item-left {
			width: 100%;
			display: flex;
			margin-top: 10px;
			// justify-content: space-around;
			align-items: center;
			background-color: #fff;
			.uni-swipe{
				width: 730rpx;
			}

			.goods-pic {
				width: 25%;
				height: 100px;
				border: 1px solid red;
			}

			.goodsname {
				padding: 7px;
			}
		}

		.goods-intro {
			display: flex;
			flex-direction: column;

			.goods-main {
				display: flex;
			}
		}
	}
</style>